<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="validTitle"
    align-center
    width="750px"
    draggable
    destroy-on-close
    :close-on-click-modal="false"
  >
    <WsmTable
      ref="table"
      load-url="/dbms-server/base/requestvalidconfig/page"
      v-model="queryFormType"
      :change-load="true"
      :is-layout="false"
      table-height="250px"
    >
      <template #title>{{ t('dbms.requestValid.paramsTitle') }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('dbms.requestValid.activity')">
          <el-radio-group v-model="data.activity.value">
            <el-radio value="">{{ t('dbms.requestValid.all') }}</el-radio>
            <el-radio value="0">{{ t('dbms.requestValid.disable') }}</el-radio>
            <el-radio value="1">{{ t('dbms.requestValid.enable') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #button="{ row }">
        <el-button type="primary" v-hasPermi="'addParams'" @click="addShow()">{{
          t('common.add')
        }}</el-button>
        <el-button v-hasPermi="'updateParams'" v-if="row" @click="update(row.id)" type="success">{{
          t('common.update')
        }}</el-button>
        <el-button v-hasPermi="'deleteParams'" v-if="row" @click="del(row.id)" type="danger">{{
          t('common.delete')
        }}</el-button>
      </template>
      <template #column>
        <el-table-column prop="validName" :label="t('dbms.requestValid.validName')" width="150" />
        <el-table-column prop="validClass" :label="t('dbms.requestValid.validClass')" />
      </template>
    </WsmTable>
    <WsmForm
      ref="addParamsForm"
      v-model="addParamsData"
      submit-url="/dbms-server/base/requestvalidconfig/add"
      label-width="100px"
      :init-data="initData"
      :title="t('dbms.requestValid.addValidTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-form-item prop="validClass" :label="t('dbms.requestValid.validClass')">
          <el-select v-model="form.validClass">
            <el-option
              v-for="item in validClass"
              :key="item.className"
              :label="item.validName"
              :value="item.className"
            />
          </el-select>
        </el-form-item>
        <template v-if="validConfig[form.validClass] && validConfig[form.validClass].length > 0">
          <template v-for="item in validConfig[form.validClass]" :key="item.id">
            <el-form-item :label="item.paramName">
              <template v-if="item.paramKey == 'expression'">
                <el-input
                  :type="item.paramType"
                  v-model="form.expression"
                  :placeholder="item.note"
                />
              </template>
              <template v-else-if="item.paramKey == 'msg'">
                <el-input :type="item.paramType" v-model="form.msg" :placeholder="item.note" />
              </template>
              <template v-else-if="item.paramKey == 'size'">
                <el-input :type="item.paramType" v-model="form.size" :placeholder="item.note" />
              </template>
              <template v-else-if="item.paramKey == 'js'">
                <el-input :type="item.paramType" v-model="form.js" :placeholder="item.note" />
              </template>
            </el-form-item>
          </template>
        </template>
      </template>
    </WsmForm>

    <WsmForm
      ref="updateParamsForm"
      v-model="updateParamsData"
      load-url="/dbms-server/base/requestvalidconfig/get"
      submit-url="/dbms-server/base/requestvalidconfig/update"
      label-width="100px"
      :title="t('dbms.requestValid.updateValidTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-form-item prop="validClass" :label="t('dbms.requestValid.validClass')">
          <el-select v-model="form.validClass">
            <el-option
              v-for="item in validClass"
              :key="item.className"
              :label="item.validName"
              :value="item.className"
            />
          </el-select>
        </el-form-item>
        <template v-if="validConfig[form.validClass] && validConfig[form.validClass].length > 0">
          <template v-for="item in validConfig[form.validClass]" :key="item.id">
            <el-form-item :label="item.paramName">
              <template v-if="item.paramKey == 'expression'">
                <el-input
                  :type="item.paramType"
                  v-model="form.expression"
                  :placeholder="item.note"
                />
              </template>
              <template v-else-if="item.paramKey == 'msg'">
                <el-input :type="item.paramType" v-model="form.msg" :placeholder="item.note" />
              </template>
              <template v-else-if="item.paramKey == 'size'">
                <el-input :type="item.paramType" v-model="form.size" :placeholder="item.note" />
              </template>
              <template v-else-if="item.paramKey == 'js'">
                <el-input :type="item.paramType" v-model="form.js" :placeholder="item.note" />
              </template>
            </el-form-item>
          </template>
        </template>
      </template>
    </WsmForm>
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { useI18n } from '@/hooks/web/useI18n'
import { delApi, validclassApi } from '@/api/dbms/requestvalidconfig'
import { computed, reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { FormDataType } from '@/components/WsmForm/src/types'

const centerDialogVisible = ref<boolean>(false)

const title = ref()

const validTitle = computed(() => {
  return t('dbms.requestValid.validTitle') + '[' + title.value + ']'
})

//表格对象
const table = ref()

//新增表单对象
const addParamsForm = ref()
const initData = ref({
  rvpid: ''
})
const addParamsData: FormDataType = {
  rvpid: '',
  validClass: '',
  expression: '',
  msg: '',
  size: '',
  js: ''
}

//修改表单对象
const updateParamsForm = ref()
const updateParamsData: FormDataType = {
  id: '',
  rvpid: '',
  validClass: '',
  expression: '',
  msg: '',
  size: '',
  js: ''
}

const { t } = useI18n()

const update = (id: string) => {
  updateParamsForm.value.show({ id })
}

const addShow = () => {
  addParamsForm.value.show()
}

const show = async (id: string, t: string) => {
  initData.value.rvpid = id
  queryFormType.rvpid.value = id
  title.value = t
  centerDialogVisible.value = true
}
//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

const queryFormType: QueryFormType = reactive({
  rvpid: {
    value: '',
    clear: false
  },
  activity: {
    value: '',
    queryType: QueryType.EQ
  }
})

const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const flushed = () => {
  table.value.load(1)
}

const validClass = ref()

const validConfig = ref({})

const loadValidClass = async () => {
  const rs = await validclassApi()
  if (rs.success) {
    validClass.value = rs.data
    rs.data.forEach((vc) => {
      validConfig.value[vc.className] = JSON.parse(vc.configParams)
    })
  }
}
loadValidClass()

//暴露方法
defineExpose({ show, hide })
</script>
<style scoped></style>
